<template>
<div class="full-page-luck">
    <div class="f_luckOne">
        <topHeader title="今日运势" :preventGoBack="preventGoBack" @on-click-back="onClickBack"></topHeader>
        
        <div class="user_message">
        <div class="user_site">
            <label>您的姓名：</label>
            <Group>
            <x-input
                :show-clear="showClear"
                placeholder="请输入姓名（汉字或字母）"
                v-model = "userName"
                @on-blur = "blurInput"
                @on-enter="enterInput"
            ></x-input>
            </Group>
        </div>
        <div class="user_sex">
            <label>性&emsp;&emsp;别：</label>
            <label @click="btn_sex(1)">
            <span v-if="user_sex == 1" class="pick"></span>
            <span v-else class="span"></span>
            男
            </label>
            <label @click="btn_sex(2)">
            <span v-if="user_sex == 2" class="pick"></span>
            <span v-else class="span"></span>
            女
            </label>
        </div>
        <div class="user_happy">
            <calendar
            valueAlign="left"
            default-str="请选择日期"
            :birthDate="birthDate"
            titleValue="出生时间："
            @getSelectDate="getBirthday"
            />
        </div>
        <button class="confirm-btn" @click="jumpLuckTwo">确定</button>
        </div>
    </div>
</div>

</template>

<script>
import { XInput, Group  } from "vux";
import calendar from "@/components/calendar/calendar.vue";
import topHeader from "@/components/topHeader";
import tool from '@/assets/js/tool'
export default {
  name: "luckOne",
  components: {
    XInput,
    Group,
    calendar,
    topHeader
  },
  data() {
    return {
      preventGoBack:true,
      user_sex: window.localStorage.getItem("JMYC_USERGENDER"),//2女 1男
      userBirthInfo: "",
      birthDate: window.localStorage.getItem("JMYC_BIRTHDATE")?this.transformBirthDate():"",
      userName:  window.localStorage.getItem("JMYC_USERNAME")||"",
      showClear: false
    };
  },
  methods: {
    onClickBack(){
      this.$router.push('/index');
    },
    // 获取生日信息
    getBirthday: function(val) {
      // console.log(val)
      this.userBirthInfo = val
    },
    // 对缓存的日期进行处理
    transformBirthDate(){
        let date = window.localStorage.getItem('JMYC_BIRTHDATE')
        let noPoint = window.localStorage.getItem('JMYC_NOPOINT')
        return tool.handleBirthDate(date, noPoint, false)
    },
    // 获取性别信息
    btn_sex(val) {
      this.user_sex = val;
    },
    //input内容输入完  点击确认事件
    enterInput(val) {
      this.userName = val;
    },
    blurInput(val){
      this.userName = val;    
    },
    // 保存用户输入信息
    saveUserData() {
      window.localStorage.setItem("JMYC_USERGENDER", this.user_sex);
      window.localStorage.setItem("JMYC_USERNAME", this.userName);
      if(this.userBirthInfo){
        let birthDay = this.handleTime(this.userBirthInfo.solarDate)
        window.localStorage.setItem("JMYC_BIRTHDATE",birthDay)
        window.localStorage.setItem("JMYC_NOPOINT",this.userBirthInfo.noPoint)
      }
    },
    jumpLuckTwo() {
      //toast公共配置
      var totalConfig = {
        type: "text",
        text: "",
        position: "top",
        time: 1000
      };
      if(!this.userName){
        totalConfig.text = '请填写姓名'
      } else if(this.user_sex===null){
        totalConfig.text = '请选择性别'
      }else if(!this.birthDate && !this.userBirthInfo) {
        totalConfig.text = '请选择出生时间'
      }else{
        this.saveUserData()
        this.saveInfoToSql()
        return
      }
      this.$vux.toast.show(totalConfig)
    },
    // 对选择的日期进行处理 1993-4-4 04:00 转换为1993-04-04 04:00
    handleTime(time){
      // 将1993-4-4 04:00转换为时间戳
      let date = new Date(time.replace(/-/g,'/'))
      // 转换为时间戳 精确到秒
      let timeStap = date.getTime()/1000
      // 将时间戳转换为时间
      return tool.timestampToTime(timeStap)
    },
    // 将数据存入数据库
    saveInfoToSql(){
      let params = {
        // device: '869115037298615,869115037349111',
        device: this.$store.state.userID || '869115037298615,869115037349111',
        sex:  window.localStorage.JMYC_USERGENDER,
        birthday: window.localStorage.JMYC_BIRTHDATE,
        nopoint: window.localStorage.JMYC_NOPOINT,
        username:  window.localStorage.JMYC_USERNAME
      }
      this.$fetch
        .post("/app/Jmyc/user_edit", params)
        .then(res => {
          if (res.code != 200 ) {
            this.$vux.toast.text('数据获取失败','top')
          }else{
            this.$router.push('/luckTwo')
          }
        })
    }
  }
};
</script>

<style lang="less">
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>


